<!--
 * @Author: daidai
 * @Date: 2022-03-01 11:17:39
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-29 15:50:18
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\center-map.vue
-->
<template>
  <div class="centermap">
    <!-- <div class="maptitle">
      <div class="zuo"></div>
      <span class="titletext">{{ maptitle }}</span>
      <div class="you"></div>
    </div> -->
    <div class="mapwrap">
      <dv-border-box-13>
        <Echart id="CenterMap" :options="options" ref="CenterMap" />
      </dv-border-box-13>
    </div>
  </div>
</template>

<script>
import xzqCode from "../../utils/map/xzqCode";
import { currentGET } from "api/modules";
import * as echarts from "echarts";
import { GETNOBASE } from "api";
import maplist from "../../../public/map-geojson/hangzhou.json";
import resData from "../../utils/map/res.js";
export default {
  data() {
    return {
      maptitle: "设备分布图",
      options: {},
      code: "hangzhou", //china 代表中国 其他地市是行政编码
      echartBindClick: false,
      isSouthChinaSea: false, //是否要展示南海群岛  修改此值请刷新页面
      arr: [],
    };
  },
  created() {},

  mounted() {
    // console.log(xzqCode);
    this.getGeojson("hangzhou");
    // this.init();
  },
  methods: {
    async getGeojson(name) {
      this.code = name;
      //如果要展示南海群岛并且展示的是中国的话
      let geoname = name;
      if (this.isSouthChinaSea && name == "china") {
        geoname = "chinaNanhai";
      }
      //如果有注册地图的话就不用再注册 了
      let mapjson = echarts.getMap(name);
      if (mapjson) {
        mapjson = mapjson.geoJSON;
      } else {
        mapjson = await GETNOBASE(`./map-geojson/${geoname}.json`).then(
          (res) => {
            return res;
          }
        );
        echarts.registerMap(name, mapjson);
      }

      this.init();
    },
    init() {
      // var chartDom = document.getElementById("CenterMap");
      // var myChart = echarts.init(chartDom);
      for (let val of resData.data) {
        this.arr.push(
          // [val.locX,val.locY].concat(val.h_name).concat(2)
          [val.locX, val.locY]
            .concat(val.h_name)
            .concat(val.bed_num)
            .concat(val.nurse_bed_num)
            .concat(val.older_num)
            .concat(val.hid)
            .concat(val.h_name)
        );
      }
      let option = {
        tooltip: {
          trigger: "item",
          // formatter: `{b}\n{c}`,
        },

        geo: {
          map: "china",
          roam: true,
          itemStyle: {
            areaColor: "#033C78",
            borderColor: "#0E8FD7",
            color: "#fff",
          },
          emphasis: {
            label: {
              color: "#fff",
            },
            itemStyle: {
              areaColor: "#145494",
            },
          },
          center: [117.029176, 28.222163],
          top: 50,
          zoom: 15,
          label: {
            // show:'true',
            color: "#fff",
          },
        },
        series: [
          {
            name: "123",
            type: "scatter",
            map: "china",
            coordinateSystem: "geo",
            legendHoverLink: true, //是否启用图例 hover 时的联动高亮。
            hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果。
            symbol: "pin",
            encode: {
              value: 2,
            },

            symbolSize: 12,
            data: this.arr,
            label: {
              normal: {
                show: false, //显示市区标签
                textStyle: { color: "#c71585" }, //省份标签字体颜色
              },
            },
            tooltip: {
              formatter: function (params) {
                return (
                  params.data[2] +
                  "</br>总床位" +
                  params.data[3] +
                  "</br>护理床位:" +
                  params.data[4] +
                  "</br>入住用户:" +
                  params.data[5]
                );
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 0.5, //区域边框宽度
                // borderColor: "#009fe8", //区域边框颜色
                borderColor: "#ffffff",
                areaColor: "#91cc75", //区域颜色
                color: "#91cc75",
              },
              emphasis: {
                show: true,
                borderWidth: 0.5,
                borderColor: "#4b0082",
                areaColor: "#91cc75",
                color: "#ee6666",
              },
            },
          },
        ],
      };

      // option && myChart.setOption(option);
      this.options = option;
    },
  },
};
</script>
<style lang="scss" scoped>
.centermap {
  margin-bottom: 30px;

  .maptitle {
    height: 60px;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    box-sizing: border-box;

    .titletext {
      font-size: 28px;
      font-weight: 900;
      letter-spacing: 6px;
      background: linear-gradient(
        92deg,
        #0072ff 0%,
        #00eaff 48.8525390625%,
        #01aaff 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0 10px;
    }

    .zuo,
    .you {
      background-size: 100% 100%;
      width: 29px;
      height: 20px;
      margin-top: 8px;
    }

    .zuo {
      background: url("../../assets/img/xiezuo.png") no-repeat;
    }

    .you {
      background: url("../../assets/img/xieyou.png") no-repeat;
    }
  }

  .mapwrap {
    // height: 548px;
    height: 758px;
    width: 100%;
    // padding: 0 0 10px 0;
    box-sizing: border-box;
    position: relative;

    .quanguo {
      position: absolute;
      right: 20px;
      top: -46px;
      width: 80px;
      height: 28px;
      border: 1px solid #00eded;
      border-radius: 10px;
      color: #00f7f6;
      text-align: center;
      line-height: 26px;
      letter-spacing: 6px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
        0 0 6px rgba(0, 237, 237, 0.4);
    }
  }
}
</style>
